<script setup lang="ts">
import { ref, computed, watch, type Ref } from "vue";
import { useAppStoreHook } from "@/store/modules/app";
import {
  delay,
  useDark,
  useECharts,
  type EchartOptions,
} from "@pureadmin/utils";
import { userLoginRank } from "@/api/log";

const { isDark } = useDark();

const theme: EchartOptions["theme"] = computed(() => {
  return isDark.value ? "dark" : "light";
});

const barChartRef = ref<HTMLDivElement | null>(null);
const { setOptions, resize } = useECharts(barChartRef as Ref<HTMLDivElement>, {
  theme,
});
const dataName = ref<string[]>([]);
const dataCount = ref<number[]>([]);

function init() {
  setOptions({
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      containLabel: true,
      top: "10px",
      bottom: "0",
      left: "0",
      right: "0",
    },
    xAxis: [
      {
        type: "category",
        axisTick: {
          alignWithLabel: true,
        },
        axisLabel: {
          interval: 0,
        },
        data: dataName.value,
        triggerEvent: true,
      },
    ],
    yAxis: [
      {
        type: "value",
        triggerEvent: true,
      },
    ],
    series: [
      {
        name: "登录次数",
        type: "bar",
        data: dataCount.value,
      },
    ],
    addTooltip: true,
  });
}

userLoginRank().then(res => {
  res.forEach(chart => {
    dataName.value.push(chart.name);
    dataCount.value.push(chart.count);
  });
  init();
});

watch(
  () => useAppStoreHook().getSidebarStatus,
  () => {
    delay(600).then(() => resize());
  }
);
</script>

<template>
  <div ref="barChartRef" style="width: 100%; height: 35vh" />
</template>
